<!DOCTYPE html>
<html>
<head>

	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
	<title>查看器主页</title>
</head>
<style type="text/css">
	*{
		padding: 0px;
	    margin: 0px;
	    box-sizing: border-box;
	}
	#imgViewer{
		display: none;
	    /*opacity: 0;*/
	    position: fixed;
	    overflow: hidden;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    z-index: 1001;
	    background-color: #222;
	    background-color: rgba(0,0,0,.8);
	    -webkit-transition: opacity .5s ease;
	    transition: opacity .5s ease;
		opacity: 1;
	}
	#imgBox{
		position: absolute;
	    left: 0;
	    top: 0;
	    height: 100%;
	    width: 100%;
	    white-space: nowrap;
	    -webkit-transition: left .4s ease,
	    -webkit-transform .4s ease;
	    transition: left .4s ease,-moz-transform .4s ease;
	    transition: left .4s ease,transform .4s ease;
	    /*transform: translate3d(0%,0px,0px);*/	
	}

	.full-image{
		display: inline-block;
	    position: relative;
	    top: 0;left: 0;right: 0;bottom: 0;
	    width: 100%;
	    height: 100%;
	    text-align: center;
	}
	.full-image img{
		display: inline-block;
	    width: 100%;
	    vertical-align: middle;
	    -webkit-box-shadow: 0 0 8px rgba(0,0,0,.6);
	    -moz-box-shadow: 0 0 8px rgba(0,0,0,.6);
	    box-shadow: 0 0 8px rgba(0,0,0,.6);
	    margin: auto;
	    position: absolute;
	    top: 0;left: 0;right: 0;bottom: 0;
	}

	#btn{
		width: 300px;
		height: 100px;
		margin:50px auto;
		line-height:100px;
		z-index: 1002;
		position: absolute;
	    top: 0;left: 0;right: 0;bottom: 0;
	}
	#btn a{
		margin-left: 30px;
		padding: 30px 30px;
		border: 1px solid #666;
		border-radius:10px;
		text-decoration: none;
		font-size: 20px;
	}
</style>
<body>

<div id="content">
	<img src="./img/tibet-1.jpg">
	<img src="./img/tibet-2.jpg">
	<img src="./img/tibet-3.jpg">
	<p><img src="./img/tibet-4.jpg"></p>
	<a><img src="./img/tibet-5.jpg"></a>
</div>


<script type="text/javascript">

var imageViewer = function () {
	var mainObj,imgIndex,imgViewer,imgBox;
	function run (id) {
		mainObj = getByid(id);
		createClickEvent();
	};
	function getByid(id) {
		return document.getElementById(id);
	};
	function getImg() {
		return mainObj.getElementsByTagName('img');
	};
	function createClickEvent() {
		imgViewer = document.createElement("div");
		imgViewer.id = 'imgViewer';		
		var divHtml = '<div id="imgBox">';
		var img = getImg();
		for (var i = 0; i < img.length; i++) {
			var imgObj = img[i];
			imgObj.index = i;
			var imgSrc = imgObj.src;
			imgObj.onclick = function (e) {
				imgViewer.style.display = 'block';
				positionByIndex(this.index);
			}
			divHtml += '<div class="full-image" id="img-'+i+'"><img src="'+imgSrc+'"></div>';
		}
		divHtml += '</div>'
		imgViewer.innerHTML = divHtml;
		document.body.appendChild(imgViewer);
		imgViewer.onclick = function (e) {
			this.style.display = 'none';
		}
	};
	function positionByIndex(index) {
		imgBox = getByid('imgBox');
		// console.log(imgBox);
		// console.log(mainObj,imgindex);
		// console.log(imgViewer,imgBox);
		var w = getX(index);
		imgBox.style.transform = imgBox.style.webkitTransform = "translate3d(" + w + ",0,0)";
		
	}
	function getX(index) {
		return 100 * -index + "%";
	}
	function goLeft() {
		M--;
		var t = 101.3 * -M + "%";
	    imgBox.style.transform = imgBox.style.webkitTransform = "translate3d(" + t + ",0,0)";
	    // k.style.left = t
		
	}
	function goRight() {
		M++;
		var t = 101.3 * -M + "%";
	    imgBox.style.transform = imgBox.style.webkitTransform = "translate3d(" + t + ",0,0)";
	}

	
	
	run('content');
}();


</script>

</body>
</html>